<template>
	<div id="mv">
		<!-- 头部导航栏 -->
		<div id="nav">
			<ul>
				<span>地区:</span>
				<li :class="{active:area=='全部'}" @click="area='全部'">全部</li>
				<li :class="{active:area=='内地'}" @click="area='内地'">内地</li>
				<li :class="{active:area=='港台'}" @click="area='港台'">港台</li>
				<li :class="{active:area=='欧美'}" @click="area='欧美'">欧美</li>
				<li :class="{active:area=='日本'}" @click="area='日本'">日本</li>
				<li :class="{active:area=='韩国'}" @click="area='韩国'">韩国</li>
			</ul>
			<br>
			<ul>
				<span>类型:</span>
				<li :class="{active:type=='全部'}" @click="type='全部'">全部</li>
				<li :class="{active:type=='官方版'}" @click="type='官方版'">官方版</li>
				<li :class="{active:type=='原声'}" @click="type='原声'">原声</li>
				<li :class="{active:type=='现场版'}" @click="type='现场版'">现场版</li>
				<li :class="{active:type=='网易出品'}" @click="type='网易出品'">网易出品</li>
			</ul>
			<br>
			<ul>
				<span>排序:</span>
				<li :class="{active:order=='上升最快'}" @click="order='上升最快'">上升最快</li>
				<li :class="{active:order=='最热'}" @click="order='最热'">最热</li>
				<li :class="{active:order=='最新'}" @click="order='最新'">最新</li>
			</ul>
		</div>
		<br>
		<!-- mv列表 -->
		<div id="list">
			<div id="img" v-for="(item,index) in listmv" :key="index">
				<img :src="item.cover">
				<h3>{{item.name}}</h3>
				<p>{{item.artistName}}</p>
			</div>
		</div>
		<!-- 分页 -->
		<div id="page">
			<el-pagination  @current-change="handleCurrentChange()" layout="prev, pager, next"
				:total="total" class="pages" :current-page="page" :page-size="10">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'Mvs',
		data() {
			return {
				total: 20, //总条数
				page: 1, //页码
				limit: 9, //页容量
				area: "全部", //地区
				type: "全部", //类型
				order: "上升最快", //排序
				listmv: []//存放mv数据
				
			}
		},
		//侦听器
		watch: {
			area() { //地区
				this.getList()
			},
			type() { //类型
				this.getList()
			},
			order() { //排序
				this.getList()
			}
		},
		created() {
			this.getList()
		},
		methods: {
			handleCurrentChange(){
				this.page = 2
				this.getList()
			},
			getList() {
				axios({
					url: 'https://autumnfish.cn/mv/all',
					method: 'get',
					params: {
						area: this.area,
						type: this.type,
						order: this.order,
						limit: this.limit,
						offset: (this.page - 1) * this.limit
					}
				}).then(res => {
					this.listmv = res.data.data
					if(res.data.count){
						this.total = res.data.count
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	#nav ul li {
		float: left;
		list-style: none;
		padding-left: 60px;
	}

	#nav ul span {
		float: left;
		color: #000000;
		font-weight: 600;
		padding-left: 100px;

	}

	#nav .active {
		color: red;
	}

	#img {
		margin-top: 30px;
		padding-left: 100px;
		float: left;


	}

	#page {
		text-align: center;
	}

	#list {
		width: 1300px;
		height: 1000px;

	}

	#img img {
		width: 300px;
		height: 200px;
	}

	#img p,
	h3 {
		padding-left: 10px;
	}
	#img h3{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		width: 280px;

	}
</style>
